<nb-card>
  <nb-card-header>条件筛选</nb-card-header>
  <nb-card-body>
    <input nbInput class="margin" placeholder="名称" [(ngModel)]="costName">
    <button nbButton class="margin" shape="rectangle" status="success" (click)="filter()">查询</button>
  </nb-card-body>
</nb-card>

<nb-card>
  <nb-card-header>
    计费管理
  </nb-card-header>

  <nb-card-body>
    <button nbButton status="info" size="small" (click)="openAddPrompt(dialog)" style="margin-bottom: 10px">增加</button>
    <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
    </ng2-smart-table>
  </nb-card-body>
</nb-card>
<ng-template #dialog let-data let-ref="dialogRef">
  <nb-card>
    <nb-card-header>新建价格</nb-card-header>
    <nb-card-body style="max-height: 400px;overflow: auto;min-width: 600px">
      <form>
        <div class="form-group row">
          <label class="label col-sm-3 col-form-label">
            名称
          </label>
          <div class="col-sm-9">
            <input type="text" nbInput fullWidth #name>
          </div>
        </div>
        <div class="form-group row">
          <label class="label col-sm-3 col-form-label">
            起始时间
          </label>
          <div class="col-sm-9">
            <input nbInput type="text" #startHour placeholder="HH" value="00">:<input #startMinute nbInput type="text" placeholder="MM" value="00">
          </div>
        </div>
        <div class="form-group row">
          <label class="label col-sm-3 col-form-label">
            结束时间
          </label>
          <div class="col-sm-9">
            <input nbInput type="text" #endHour placeholder="HH" value="23">:<input #endMinute nbInput type="text" placeholder="MM" value="59">
          </div>
        </div>
        <div class="form-group row">
          <label class="label col-sm-3 col-form-label">
            类型
          </label>
          <div class="col-sm-9">
            <nb-select status="info" [(selected)]="item" placeholder="选择类型">
              <nb-option value="度">用电(每度)</nb-option>
              <nb-option value="升">用水(每升)</nb-option>
              <nb-option value="立方">用气(每立方)</nb-option>
            </nb-select>
          </div>
        </div>
        <div class="form-group row">
          <label class="label col-sm-3 col-form-label">
            价格
          </label>
          <div class="col-sm-9">
            <input #cost nbInput >元/{{item}}
          </div>
        </div>
        <div class="form-group row">
          <label class="label col-sm-3 col-form-label">
            备注
          </label>
          <div class="col-sm-9">
            <input #remark nbInput fullWidth>
          </div>
        </div>
      </form>
    </nb-card-body>
    <nb-card-footer>
      <button nbButton status="danger" (click)="ref.close()">取消</button>
      <button style="margin-left: 10px" nbButton status="success"
              (click)="ref.close({'costName':name.value
                ,'type':item
                ,'rate':cost.value
                ,'startTime':startHour.value+'.'+startMinute.value+'.00'
                ,'endTime':endHour.value+'.'+endMinute.value+'.59'
                ,'extInfo':remark.value})">
        提交
      </button>
    </nb-card-footer>
  </nb-card>
</ng-template>
